<template>
  <div class="cate-gory">
    <!-- 导航 -->
    <nav-bar class="nav-bar">
      <div slot="center">商品分类</div>
    </nav-bar>

    <!-- 滚动区域 -->
    <category-scroll :sub-cate-list="cateList" :right-list="cateRightList" @subItemClick="itemClick" />
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar/NavBar.vue'
import CategoryScroll from './CategoryChild/CategoryScroll.vue'

// 网络请求
import { getCategory, getSubCategory } from 'network/category'

export default {
  name: 'Category',
  props: {},
  components: {
    NavBar,
    CategoryScroll
  },
  data () {
    return {
      // 侧边分类
      cateList: [],
      // 右侧分类商品数组
      cateRightList: [],
      // 主要key
      maitkey: null
    }
  },
  created () {
    getCategory().then((res) => {
      const data = res.data.category.list || []
      this.cateList = data
    })
  },
  mounted () {},
  updated () {},
  computed: {},
  methods: {
    itemClick (key) {
      this.maitkey = key
    }
  },
  watch: {
    maitkey (newMaitkey, oldMaitkey) {
      getSubCategory(newMaitkey).then((res) => {
        const rightData = res.data.list || []
        this.cateRightList = rightData
      })
    }
  }
}
</script>

<style lang="less" scoped>
.cate-gory {
  height: 100%;

  .nav-bar {
    background-color: var(--color-tint);
    font-size: 18px;
    color: #fff;
  }
}
</style>
